<template>
	<view class="container">
		<view class="top-wrapper">
			<view class="balance"><text class="small">￥</text>{{memberInfo.balance}}</view>
			<view class="balance-btn" @click="details">余额明细</view>
		</view>
		<view class="content">
			<view class="title">余额充值</view>
			<view class="recharge-list">
				<view class="recharge-item" :class="{'on': id == item.id}" v-for="item in rechargeSetsList" @click="handleSwitchAmount(item.id)" :key="item.id">
					<image src="../../static/checkbox_on.png" class="icon"></image>
					<view class="titl">充值{{item.amount}}元</view>
					<view class="desc">赠送{{item.score}}积分</view>	
				</view>
			</view>
			<button type="default" class="btn" :disabled="submitFlag || !id" @click="handleRecharge">立即充值</button>
			<view class="rule-wrapper">充值即表示同意<view class="rule" @click="popup">魔利购充值条款</view></view>	
		</view>
		<view class="explain-wrapper">
			<view class="title">充值说明：</view>
			<view class="explain-list">
				<view class="explain-item">1.充值后金额立即到账，余额可在魔利购消费。</view>
				<view class="explain-item">2.单个用户可充值多次，每次充值均可获得对应积分，积分可兑换商品。</view>
			</view>
		</view>
		<view class="popup" :hidden="show">
			<view class="popupTitle">
				魔利购用户充值条款
			</view>
			<view class="popupText">
				1.特别提示
			</view>
			<view class="popupText">
				  魔利购小程序（以下简称：魔利购）同意按照本协议的规定及其不时发布的操作规则提供基于平台充值服务(以下称“充值服务”)，包括为获得充值服务，服务使用人(以下称“用户”)同意本协议的全部条款并按照页面上的提示完成全部的充值程序。用户在进行充值程序过程中点击“同意”按钮即表示用户完全接受本协议项下的全部条款。这些条款可由魔利购随时更新，本服务协议一旦发生变动，魔利购将会在相关的页面上提示修改内容。修改后的服务协议一旦在页面上公布即有效代替原来的服务协议。用户可随时造访魔利购智慧平台充值付费页面查阅最新充值用户协议。用户在使用魔利购提供的各项服务之前，应仔细阅读本服务协议，如用户不同意本充值用户协议请停止使用魔利购充值后提供的服务。
			</view>
			<view class="popupText">
				  2.服务内容
			</view>
			<view class="popupText">
		          2.1 魔利购充值服务的具体内容由魔利购根据实际情况提供，魔利购保留随时变更、中断或终止部分或全部网络服务的权利。
			</view>
			<view class="popupText">
				2.2 魔利购在提供网络服务时，可能会对部分网络服务的用户收取一定的费用。在此情况下，魔利购会在相关页面上做明确的提示。如用户不同意支付该等费用，则可不接受相关的网络服务。
			</view>
			<view class="popupText">
				2.3 用户理解：魔利购仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如电脑、调制解调器及其他与接入互联网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费)均应由用户自行负担。
			</view>
			<view class="popupText">
				3.使用规则
			</view>
			<view class="popupText">
				  3.1 用户必须采用魔利购所指定的充值方式进行充值，可供充值方式包括：微信、支付宝、银行卡充值及其他魔利购指定的方式，以增加用户账户所有的虚拟货币的数量。若使用非魔利购所指定的充值系统进行充值，或以非法的方式进行充值而造成用户权益受损时，不得因此要求魔利购作任何补偿或赔偿，魔利购也保留随时终止其账户资格及使用各项充值服务的权利。
			</view>
			<view class="popupText">
				3.2用户充值一旦成功，充值即确定完成，魔利购将不提供任何更改、修正服务。用户不得向魔利购要求退还充值产品。充值后若有任何剩余积分，用户不得以此要求退费，若发生异议用户可通过客服专线查询处理。
			</view>
			<view class="popupText">
				3.3 在使用魔利购充值系统时，用户必须仔细确认自己的账号，若因为用户自身输入账号错误、操作不当或不了解充值计费方式等因素造成充错账号、错选充值种类等情形而损害自身权益，不得因此要求魔利购作任何补偿或赔偿。
			</view>
			<view class="popupText">
				3.4 若因用户违返魔利购用户协议条款或本充值协议，魔利购因此冻结账号及终止账号使用资格者，不得因此要求魔利购作任何补偿或赔偿。
			</view>
			<view class="popupText">
				3.5 使用魔利购充值系统充值后，用户即可在本程序平台中进行消费使用。
			</view>
			<view class="popupText">
				3.6 使用魔利购充值卡进行充值后，必须保留充值卡至有效期期限结束为止，以作为今后发生问题核对依据凭证。若因为未保存充值卡而造成用户受损时，不得因此要求魔利购作任何补偿或赔偿。
			</view>
			<view class="popupText">
				3.7 若因魔利购充值系统原因造成用户充值失实，在魔利购恢复、存有有效数据和用户提供合法有效凭证的情况下，魔利购将根据用户充值情况作出变动措施：
			</view>
			<view class="popupText">
				3.7.1 因充值系统原因，造成系统充值额小于用户实际充值额的，魔利购予以补其差额；
			</view>
			<view class="popupText">
				3.7.2 因充值系统原因，造成系统充值额大于用户实际充值额的，魔利购有权追回差额。
			</view>
			<view class="popupText">
				5.隐私保护
			</view>
			<view class="popupText">
				4.1 保护用户（特别是未成年人）的隐私是魔利购的一项基本政策，因此，若父母（监护人）希望未成年人（尤其是十岁以下子女）得以使用本服务，必须以父母（监护人）名义申请注册，在接受本服务时，应以法定监护人身份加以判断本服务是否符合于未成年人。 魔利购保证不对外公开或向第三方 （4.2所列情况除外）提供用户注册资料及用户在使用网络服务时存储在魔利购的非公开内容，但下列情况除外：
			</view>
			<view class="popupText">
				(A) 事先获得用户的明确授权；
			</view>
			<view class="popupText">
				　(B) 根据有关的法律法规要求；
			</view>
			<view class="popupText">
				(C) 按照相关政府主管部门的要求；
			</view>
			<view class="popupText">
				 (D) 为维护社会公众的利益；
			</view>
			<view class="popupText">
				(E) 为维护魔利购的合法权益。 
			</view>
			<view class="popupText">
				4.2 魔利购可能会与第三方合作向用户提供相关的网络服务，在此情况下，如该第三方同意承担与魔利购同等的保护用户隐私的责任，则魔利购可将用户的注册资料等提供给该第三方。
			</view>
			<view class="popupText">
				4.3在不透露单个用户隐私资料的前提下，魔利购有权对整个用户数据库进行技术分析并对已进行分析、整理后的用户数据库进行商业上的利用。 尽管魔利购对用户的隐私权保护做了极大的努力，但是仍然不能保证现有的安全技术措施使用户的技术信息等不受任何形式的损失。
			</view>
			<view class="popupText">
				5.免责声明
			</view>
			<view class="popupText">
				　(1) 本服务将符合您的要求
			</view>
			<view class="popupText">
				(2) 本服务将不受干扰、及时提供、安全可靠或不会出错。 
			</view>
			<view class="popupText">
				5.2用户明确同意其使用魔利购充值服务所存在的风险将完全由其自己承担；因其使用魔利购充值服务而产生的一切后果也由其自己承担，魔利购对用户不承担任何责任。 
			</view>
			<view class="popupText">
				  6.服务变更、中断或终止
			</view>
			<view class="popupText">
				6.1 如因系统维护或升级的需要而需暂停网络充值服务，魔利购将尽可能事先进行通告。
			</view>
			<view class="popupText">
				6.2 如发生下列任何一种情形，魔利购有权随时中断或终止向用户提供本协议项下的网络服务而无需通知用户：
			</view>
			<view class="popupText">
				(1) 用户提供的个人资料不真实；
			</view>
			<view class="popupText">
				(2) 用户违反本协议中规定的使用规则。
			</view>
			<view class="popupText">
				6.3 除前款所述情形外，魔利购同时保留在不事先通知用户的情况下随时中断或终止部分或全部网络充值服务的权利，对于充值服务的中断或终止而造成的任何损失，魔利购无需对用户或任何第三方承担任何责任。
			</view>
			<view class="popupText">
				 7.违约赔偿
			</view>
			<view class="popupText">
				 7.1 用户同意保障和维护魔利购及其他用户的利益，如因用户违反有关法律、法规或本协议项下的任何条款而给魔利购或任何其他第三人造成损失，用户同意承担由此造成的损害赔偿责任
			</view>
			<view class="popupText">
				8.法律管辖 
			</view>
			<view class="popupText">
				8.1 本协议的订立、执行和解释及争议的解决均应适用中国法律。
			</view>
			<view class="popupText">
				8.2 如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均应向魔利购所在地的人民法院提起诉讼。
			</view>
			<view class="popupText">
				9.通知和送达
			</view>
			<view class="popupText">
				9.1 本协议项下所有的通知均可通过重要页面公告、电子邮件或常规的信件传送等方式进行；该等通知于发送之日视为已送达收件人。 
			</view>
			<view class="popupText">
				10.其他规定 
			</view>
			<view class="popupText">
				10.1 本协议构成双方对本协议之约定事项及其他有关事宜的完整协议，除本协议规定的之外，未赋予本协议各方其他权利。
			</view>
			<view class="popupText">
				10.2 如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款仍应有效并且有约束力。
			</view>
			<view class="popupText">
				10.3 本协议中的标题仅为方便而设，不具法律或契约效果。
			</view>
			<button type="default" :disabled="btnFlag" class="popupBtn" @click="handleClick">我已阅读并同意{{time?'('+time+')':''}}</button>
		</view>
	</view>
</template>

<script>
	import { rechargeSets, recharge } from '@/api/user.js'
	import payment from '@/mixins/payment.js'
	export default {
		mixins: [payment],
		data() {
			return {
				id: '',
				rechargeSetsList: [],
				submitFlag: false,
				payMethod: '',
				show:true,
				btnFlag:true,
				time:0
			}
		},
		computed: {
			memberInfo () {
			  return this.$store.getters.userInfo
			}
		},
		onLoad() {
			this.getRechargeSets()
		},
		onShow() {
			this.$store.dispatch('user/getUserInfo')
		},
		methods: {
			popup(){
				this.show=false
				this.btnFlag=true
				this.time=3
				let timer=setInterval(()=>{
				this.time -=1	
				if(this.time===0){
					clearInterval(timer)
					this.btnFlag=false
				}
				},1000)
			},
			handleClick(){
				this.show=true
			},
			getRechargeSets() {
				rechargeSets().then(respanse => {
					this.rechargeSetsList = respanse.result
					if (respanse.result.length > 0) {
						this.id = respanse.result[0].id
					}
				})
			},
			
			// 充值
			handleRecharge() {
				const that = this
				uni.getProvider({
					service: 'payment',
					success: (result) => {
						result.provider.map((value) => {
							that.provider = value
							if (that.provider == 'wxpay') {
								that.payMethod = 2
							}
							if (that.provider == 'alipay') {
								that.payMethod = 3
							}
							if (!that.provider) {
								uni.showToast({
										title: '获取信息中，稍后重试',
										icon: 'none',
										duration: 2000
								})
								return
							}
							
							that.submitFlag = true
							const data = {
								id: that.id,
								payMethod: that.payMethod
							}
							recharge(data).then(respanse => {
								that.createOrderDetails = respanse.result
								that.payment(3, true)
								that.submitFlag = false
							}).catch(err => {
								that.submitFlag = false
							})
						})
					},
					fail: (error) => {
						console.log('获取登录通道失败', error);
					}
				})
			},
			
			//  切换金额
			handleSwitchAmount(id) {
				this.id = id
			},
			
			details() {
				uni.navigateTo({
				    url: '/pages/user/balance-details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
	}
	.popup{
		position: fixed;
		top: 50rpx;
		left: 25rpx;
		width: 620rpx;
		height: 1120rpx;
		padding: 20rpx 40rpx 80rpx;
		overflow: auto;
		background-color:#fff;
		.popupTitle{
			padding: 10rpx 0;
			width: 100%;
			text-align: center;
			font-size: 36rpx;
		}
		.popupText{
			padding: 10rpx 0;
			line-height: 50rpx;
		}
		.popupBtn{
			position: fixed;
			left: 75rpx;
			bottom: 187rpx;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
			background: linear-gradient(-90deg, #ED602B, #F19136);
			border-radius: 40rpx;
		}
	}
	.top-wrapper{
		position: relative;
		padding-top: 50rpx;
		height: 268rpx;
		box-sizing: border-box;
		background: linear-gradient(-90deg, #ED602B, #F19136);
		.balance{
			line-height: 94rpx;
			text-align: center;
			font-size: 94rpx;
			color: #fff;
			.small{
				font-size: 44rpx;
			}
		}
		.balance-btn{
			position: absolute;
			right: 0;
			top: 0;
			padding: 26rpx 32rpx;
			line-height: 38rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
	.content{
		position: relative;
		padding: 35rpx 31rpx 51rpx;
		margin: -79rpx 31rpx 0;
		background: #FFFFFF;
		border: 1px solid #E6E6E6;
		border-radius: 16rpx;
		overflow: hidden;
		.title{
			line-height: 42rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #1F2439;
		}
		.recharge-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 6rpx;
			.recharge-item{
				position: relative;
				margin-top: 31rpx;
				padding-top: 51rpx;
				width: 299rpx;
				height: 187rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border: 1px solid #CCCCCC;
				border-radius: 8rpx;
				text-align: center;
				.icon{
					position: absolute;
					right: 12rpx;
					top: 6rpx;
					display: none;
					width: 38rpx;
					height: 38rpx;
				}
				.titl{
					line-height: 47rpx;
					font-size: 37rpx;
					color: #1F2439;
				}
				.desc{
					margin-top: 10rpx;
					line-height: 41rpx;
					font-size: 31rpx;
					color: #ED602B;
				}
				&.on{
					background: rgba(242, 158, 115, 0.1);
					border-color: #ED602B;
					.icon{
						display: block;
					}
				}
			}
		}
		.btn{
			display: block;
			margin: 48rpx 10rpx 0;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
			border-radius: 45px;
		}
		.rule-wrapper{
			margin-top: 25rpx;
			line-height: 37rpx;
			text-align: center;
			font-size: 27rpx;
			color: #191919;
			.rule{
				display: inline-block;
				vertical-align: top;
				color: #B77528;
			}
		}
	}
	.explain-wrapper{
		margin: 45rpx 40rpx 20rpx 48rpx;
		.title{
			line-height: 41rpx;
			font-size: 31rpx;
			font-weight: bold;
			color: #666666;
		}
		.explain-list{
			padding-top: 27rpx;
			.explain-item{
				padding: 5rpx 0;
				line-height: 1;
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
</style>
